import Vue from "vue";
import VueRouter from "vue-router";
import { SETMENU, SETUSERINFO } from "@/store/mutation-types"; //导入mutation方法
import store from "@/store";
import { getUserByToken } from "@/request/httpAPI"; //导入axios请求
// import Home from '../views/Home.vue'

// Vue.use调用VueRouter里面的install方法
Vue.use(VueRouter);

// 设置路由规则
const routes = [
  // {
  //   path: "/",
  //   name: "Home",
  //   component: () =>
  //     import(/* webpackChunkName: "Home" */ "../views/Home/HomePage.vue"),
  // },
  {
    path: "/login",
    name: "login",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/login/login.vue"),
  },
];

// 完整路由规则 (存放所有菜单的路由规则)
const routesArr = {
  // 商品页
  "/good": {
    path: "/good",
    component: () =>
      import(/* webpackChunkName: "good" */ "../views/good/Good.vue"),
    meta: {
      path: "/good", //自定义属性 在这里可以使当前的导航高亮
    },
  },
  // 商品属性管理
  "/attribute": {
    path: "/attribute",
    component: () =>
      import(
        /* webpackChunkName: "attribute" */ "../views/attribute/Attribute.vue"
      ),
    meta: {
      path: "/attribute",
    },
  },
  // 品牌管理
  "/brand": {
    path: "/brand",
    component: () =>
      import(/* webpackChunkName: "brand" */ "../views/brand/Brand.vue"),
    meta: {
      path: "/brand",
    },
  },
  // 品牌新增/编辑
  "/addbrand": {
    path: "/addbrand",
    component: () =>
      import(/* webpackChunkName: "addBrand" */ "../views/brand/AddBrand.vue"),
    meta: {
      path: "/brand",
    },
  },
  // 品牌详情
  "/editbrand": {
    name: "editbrand",
    path: "/editbrand",
    component: () =>
      import(/* webpackChunkName: "addBrand" */ "../views/brand/EditBrand.vue"),
    meta: {
      path: "/brand",
    },
  },
  // 分类
  "/category": {
    path: "/category",
    component: () =>
      import(
        /* webpackChunkName: "category" */ "../views/category/Category.vue"
      ),
    meta: {
      path: "/category",
    },
  },
};

const router = new VueRouter({
  routes,
});

// 动态添加路由规则 --- 把登录后的权限菜单列表和路由进行对比，得到用户路由规则，动态添加
const generateRoute = () => {
  let newRouter = [];
  for (let i = 0; i < store.state.menu.length; i++) {
    let path = store.state.menu[i].path;
    if (routesArr[path]) {
      newRouter.push(routesArr[path]);
    }
  }
  // console.log(newRouter);
  // 动态添加路由规则
  router.addRoutes([
    {
      path: "/",
      name: "Home",
      component: () =>
        import(/* webpackChunkName: "Home" */ "../views/Home/HomePage.vue"),
      children: newRouter,
    },
  ]);
};

// 前置路由守卫
router.beforeEach((to, from, next) => {
  let token = localStorage.getItem("token");
  // console.log(token);
  // 有token值并且页面刷新(vuex初始化);
  if (token && store.state.menu.length == 0) {
    getUserByToken().then((res) => {
      // console.log(res);
      if (res.data.errno !== 0) {
        // console.log(res);
        store.commit(SETMENU, res.data.menu);
        store.commit(SETUSERINFO, res.data.userInfo);
        // 生成当前用户的路由规则
        generateRoute();
      }
      next(to.path); //刷新后还在当前页面
    });
  }
  //有token值且vuex有数据且从登录(login)页面跳转到首页(Home)
  else if (
    token &&
    store.state.menu.length > 0 &&
    from.path === "/login" &&
    to.path === "/"
  ) {
    // 生成当前用户的路由规则
    generateRoute();
    // next(store.state.menu[0].path); // 登录后默认跳转到store.state.menu[0]的页面
    next("/good"); //默认跳转到商品页
  }
  // 没有token值,并且不是跳转到登录(login)界面
  else if (!token && to.path !== "/login") {
    next("/login");
  }
  //一律放行
  else {
    next();
  }
});

export default router;
